<!DOCTYPE html>
<html>
  <head>
   <style>
    #inner {  
      border: 1px solid black;
    }

    #outer {
      border: 1px solid red;
      width:100%;
      display: flex;
      justify-content: center;
    }

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
     .d1 {
       width: 100%;
       /* text-align: center; */
       margin: 0 auto;
     }
     .d2 {
       display: flex;
       align-items:  center;
     }
    /*
    <div id="outer">
      <div id="inner">Foo foo</div>
    </div>
    
    */
  </style>
  </head>
  <body>

<div class="content"> HHHH </div>    
    
  </body>
</html>